<template>
    <v-layout v-if="isLoading">
        <div style="display: flex;justify-content: center;align-items: center;height: 100vh;width: 100%;">
            <v-progress-circular indeterminate size="50" color="blue" width="1"></v-progress-circular>
        </div>
    </v-layout>
    <v-layout v-else>
        <div style="width: 100%;background-color: rgb(239, 239, 239);min-height: 100%;padding: 10px;">
            <div style="padding: 15px;background-color: white;">
                <v-data-table :items="courses" height="70vh" :headers="headers" :items-per-page="-1" show-select
                    style="font-size: small;" density="comfortable" v-model="selectedCourse">
                    <template v-slot:bottom>
                        <div>
                            <v-btn @click="isAdding = !isAdding" :disabled="selectedCourse.length == 0">添加备注</v-btn>
                        </div>
                    </template>
                </v-data-table>
            </div>
        </div>
    </v-layout>
    <v-overlay v-model="isAdding" style="align-items: center;justify-content: center;">
        <v-sheet width="700px" height="400px" color="white">
            <v-container>
                <v-row>
                    <v-col>
                        <span class="title">添加备注：</span>
                    </v-col>
                </v-row>
                <v-row>
                    <v-col>
                        <v-textarea variant="outlined" :placeholder="'为' + getSelectedCourseNames() + '添加备注'"
                            v-model="comment">
                        </v-textarea>
                    </v-col>
                </v-row>
                <v-row justify="center" @click="addComment">
                    <v-btn>提交</v-btn>
                </v-row>
            </v-container>
        </v-sheet>
    </v-overlay>
</template>
<script setup lang="ts">
import type { Course } from '@/models/course';
import { ref } from 'vue';
import { onMounted } from 'vue';
import { AddComment, GetMergedCourseSchedule } from '@/controllers/courseController'
import { message } from '@/utils/message';
const headers = [
    { title: '课序号', key: 'index', sortable: false },
    { title: '课程名称', key: 'name', sortable: false },
    { title: '课程类别', key: 'type', sortable: false },
    { title: '开课学院', key: 'academy', sortable: false },
    { title: '授课教师', key: 'teacher', sortable: false },
    { title: '学分', key: 'credit', sortable: false },
    { title: '授课地点', key: 'location', sortable: false },
    { title: '开课时间', key: 'formatTime', sortable: false },
]
let courses = ref([] as Course[])
let isLoading = ref(true)
let selectedCourse = ref([] as number[])
let isAdding = ref(false)
let comment = ref('')

onMounted(() => {
    getMergedCourseSchedule()
})

async function getMergedCourseSchedule() {
    try {
        courses.value = await GetMergedCourseSchedule()
    }
    catch (error: any) {
        message(error.message, 'error')
    }
    finally {
        isLoading.value = false
    }
}
function getSelectedCourseNames() {
    if (selectedCourse.value.length === 0) return ''
    let result = ''
    let flag = true
    selectedCourse.value.forEach((val) => {
        if (flag) {
            result += courses.value[val - 1].name
            flag = false
        }
        else result = result + '、' + courses.value[val - 1].name
    })
    return result
}
async function addComment() {
    try {
        for (let i = 0; i < selectedCourse.value.length; i++) {
            let index = selectedCourse.value[i]
            await AddComment(courses.value[index - 1].id, comment.value)
        }
        message('备注添加成功', 'success')
    } catch (error: any) {
        message(error.message, 'error')
    }
}
</script>
<style scoped>
.title {
    font-size: 18;
    font-weight: bold;
    color: #333;
    margin-right: 1%;
}
</style>